<template>
  <div :class="{ unfold: true, packup: !expanded }" @click.stop="expandPack" v-if="!expandedHidden || !expanded">
    <span>{{ expanded ? packText : expandText }}</span
    ><img
      src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/6c3060a9-da8a-4fce-bc01-6282d5db8074.png"
      alt=""
      :class="{ expanded }"
    />
  </div>
</template>

<script>
export default {
  props: {
    expandedHidden: {
      type: Boolean,
      default: false,
    },
    expandText: {
      type: String,
      default: '展开',
    },
    packText: {
      type: String,
      default: '收起',
    },
  },
  data() {
    return {
      expanded: false,
    };
  },
  methods: {
    expandPack() {
      this.expanded = !this.expanded;
      this.$emit('updateExpanded', this.expanded);
    },
  },
};
</script>
<style lang="less" scoped>
.unfold {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  &.packup {
    img {
      margin-bottom: 3px;
    }
  }
  span {
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: var(--text-5);
    line-height: 36px;
    font-weight: 400;
  }
  img {
    width: 32px;
    height: 32px;
    margin-left: 4px;
    transition: 0.2s;
    &.expanded {
      transform: rotate(180deg);
    }
  }
}
</style>
